<template>
	<view class="message">
		<navBar />
		
		<view class="titles">在线留言</view>
		<!-- 我的留言 -->
		<scroll-view class="mymes" scroll-y>
			<view class="mesi" v-for="(item,index) in messageList" :key="index">
				<view>留言类型：<text class="type"
				:style="{
					color:messSatus(item.leaveType).color,
					backgroundColor:messSatus(item.leaveType).bg,
				}"
				>{{ item.leaveType }}</text></view>
				<view>{{ item.accountName }}：{{ item.content }}</view>
				<view>留言时间：{{ $getRelativeTime(item.leaveTime) }}</view>
			</view>
		</scroll-view>
		<view class="titles">发布留言</view>
		<!-- 提交留言 -->
		<view class="submess">
			<textarea placeholder="请输入留言内容" v-model="content" class="textarea" maxlength="200"></textarea>
			<view class="subbtn" @click="subMessage">发布留言</view>
		</view>
		<tabBar selectedIndex="3" selectedTab="1" />
	</view>
</template>

<script>
	// 引入api
	import { 
		getProgramQueryLeaveMeassage, // 留言查询
		postProgramCreateLeaveMeassage, // 留言新增
	} from "@/proxy/program/program.api.js";
	export default {
		async onLoad(){
			await this.getProgramQueryLeaveMeassageData()
		},
		data(){
			return{
				content:"",
				messageList:[]  // 留言列表
			}
		},
		methods:{
			// 获取留言列表
			async getProgramQueryLeaveMeassageData(){
				const { customerCode,businessName,businessCode } = uni.getStorageSync("userInfo");
				if(!customerCode){
					// return this.$toast({
					  // title: "请前往小程序授权登录",
					  // icon: "error",
					// });
					return false;
				}
				// 发送请求
				try {
				  const result = await getProgramQueryLeaveMeassage([{
					  rasclientId:customerCode,
					  businessName:businessName,
					  businessCode,businessCode
				  }]);
				  if (result.code == 200) {
					  this.messageList = result.data;
				      // console.log("查询留言成功！！！",result);
				  } else {
				    this.$toast({
				      title: result.data.msg,
				    });
				    return false;
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  this.$toast({
				    title: "请求失败",
				    icon: "error",
				  });
				  return false;
				}
			},
			// 发布留言 userID userPhone
			async subMessage(){
				const { customerCode,businessName,customerName,userName,userID } = uni.getStorageSync("userInfo");
				if(!customerCode){
					return this.$toast({
					  title: "请前往小程序授权登录",
					  // icon: "error",
					});
				}
				// 发送请求
				try {
				  const result = await postProgramCreateLeaveMeassage([{
					  rasclientId:customerCode,
					  rasclientName:customerName,
					  businessName:businessName,
					  accountNumber:userID,
					  accountName:userName,
					  userId:userID,
					  content:this.content
				  }]);
				  // console.log(result)
				  if (result.code == 200) {
					  this.content = '';
					  this.getProgramQueryLeaveMeassageData();
				      // console.log("留言成功！！！",result);
				  } else {
				    return this.$toast({
				      title: result.data.msg,
				    });
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  return this.$toast({
				    title: "请求失败",
				    icon: "error",
				  });
				}
			},
			// 留言状态 ()
			messSatus(type) {
				switch (type) {
					case "留言":
						return {
							color: "#075983",
							bg: "#E0F2FE",
						};
						break;
					case "回复":
						return {
							color: "#1B6838",
							bg: "#DCFCE7",
						};
						break;
					default:
						return {
							color: "#92400E",
							bg: "#FEF3C7",
						};
				}
			}
		}
	}
</script>

<style lang="scss">
	// page{
	// 	background-color: rgb(249,250,251);
	// 	height: 100vh;
	// }
	/* app端 */
	/* #ifdef APP-PLUS || H5 */
	#app,
	/* #endif */
	page {
	  background-color: #F9FAFB;
	  height: 100%;
	}
	.message{
		display: flex;
		flex-direction: column;
		justify-content: center;
		.titles{
			margin: 20rpx 20rpx 0rpx 20rpx;
			font-size: 30rpx;
			width: 200rpx;
			text-align: center;
			/* background-image: linear-gradient(to right, rgb(224,247,237), rgb(235,243,254)); */
			/* color: #fff; */
			border: 1rpx solid #ddd;
			border-radius: 30rpx;
			padding: 5rpx 0rpx;
		}
		.mymes{
			margin: 20rpx 20rpx 0rpx 20rpx;
			background-color: #fff;
			height: 45vh;
			overflow-y: auto;
			width: auto;
			// box-shadow: #bbb 0 0 8rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
			.mesi{
				padding: 15rpx;
				border-bottom: 1rpx solid #ddd;
				font-size: 25rpx;
				.type{
					padding: 0px 15rpx;
					border-radius: 5rpx;
				}
			}
		}
		.submess{
			margin: 20rpx 20rpx 0rpx 20rpx;
			font-size: 25rpx;
			.textarea{
				background-color: #fff;
				width: 100%;
				height: 170rpx;
				padding: 15rpx;
				// box-shadow: #bbb 0 0 8rpx;
				box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
				box-sizing: border-box;
			}
			.subbtn{
				width: 200rpx;
				padding: 15rpx 10rpx;
				background-color: rgba(0, 123, 255, 0.68);
				// background-color: #007BFF;
				color: #fff;
				font-size: 24rpx;
				border-radius: 30rpx;
				text-align: center;
				float: right;
				margin-top: 15rpx;
			}
		}
	}	
</style>